<template>
  <div class="container">
<!--    <div class="homePage_title" style="margin-top: 10px">-->
<!--      <span style="font-size: 18px;font-weight: 500;margin-left: 14px;font-weight: bold" >数据概览</span>-->
<!--    </div>-->
    <el-row class="top" style="margin-top: 20px;margin-left: 14px;margin-right: 14px;justify-content: space-between;display: flex;">
      <el-col :span="4">
        <div class="text-wrapper_card">
          <div style="padding-top: 20px;padding-left: 30px;">

            <div style="color: #636C86;font-size: 14px" class="Cname"><span>资产总数量</span></div>
            <div class="index-top-icon index-top1"></div>
          </div>
          <div style="color: #636C86;padding-left: 30px;font-weight: 600;font-size: 20px" class="Number"><span>{{form.assetNum}}</span></div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="text-wrapper_card">
          <div style="padding-top: 20px;padding-left: 30px;">

            <div style="color: #636C86;font-size: 14px" class="Cname"><span>耗材分类</span></div>
            <div class="index-top-icon index-top2"></div>
          </div>
          <div style="color: #636C86;padding-left: 30px;font-weight: 600;font-size: 20px" class="Number"><span>{{form.consumableNum}}</span></div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content text-wrapper_card">
          <div style="padding-top: 20px;padding-left: 30px;">

            <div style="color: #636C86;font-size: 14px" class="Cname"><span>仓库数量</span></div>
            <div class="index-top-icon index-top3"></div>
          </div>
          <div style="color: #636C86;padding-left: 30px;font-weight: 600;font-size: 20px" class="Number"><span>{{form.stockNum}}</span></div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="text-wrapper_card">
          <div style="padding-top: 20px;padding-left: 30px;">

            <div style="color: #636C86;font-size: 14px" class="Cname"><span>部门数量</span></div>
            <div class="index-top-icon index-top4"></div>
          </div>
          <div style="color: #636C86;padding-left: 30px;font-weight: 600;font-size: 20px" class="Number"><span>{{form.deptNum}}</span></div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content text-wrapper_card">
          <div style="padding-top: 20px;padding-left: 30px;">

            <div style="color: #636C86;font-size: 14px" class="Cname"><span>员工数量</span></div>
            <div class="index-top-icon index-top5"></div>
          </div>
          <div style="color: #636C86;padding-left: 30px;font-weight: 600;font-size: 20px" class="Number"><span>{{form.staffNum}}</span></div>
        </div>
      </el-col>
    </el-row>
<!--    <div class="homePage_title">-->
<!--      <span style="font-size: 18px;font-weight: 500;margin-left: 14px;font-weight: bold">资产统计</span>-->
<!--    </div>-->
    <div style="margin-left: 14px;margin-right: 14px;margin-bottom: 10px;height: auto;display: flex;">
      <div style="height: auto;width: 368px;">
        <!-- width: 34% -->
        <el-row>
          <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);height:380px; background-color: #FFFFFF" id="assetStatus"></el-col>
        </el-row>
<!--        <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);text-align: center;color: #6C7293;font-size: 14px;height: 50px;margin-top: 2px;background-color: #FFFFFF;display: flex;justify-content: center;align-items: center">资产状态环形图</el-row>-->
      </div>
      <div style="margin-left: 24px;height: auto;width: calc(100% - 368px)">
        <!-- width: 100%; -->
        <el-row>
          <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); height: 380px; background-color: #FFFFFF;" id="assetNumberStatus"></el-col>
        </el-row>
<!--        <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);text-align: center;color: #6C7293;font-size: 14px;height: 50px;margin-top: 2px;background-color: #FFFFFF;display: flex;justify-content: center;align-items: center">各类型资产数量统计图</el-row>-->
      </div>
    </div>
<!--    <div class="homePage_title">-->
<!--      <span style="font-size: 18px;font-weight: 500;margin-left: 14px;font-weight: bold">耗材统计</span>-->
<!--    </div>-->
    <div style="margin-left: 14px;margin-right: 14px;margin-bottom: 10px;height: auto;display: flex;">
      <div style="height: auto;width: 368px;">
        <!-- width: 35%" -->
        <el-row>
          <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);height: 380px; background-color: #FFFFFF;" id="materialStatus"></el-col>
        </el-row>
<!--        <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);text-align: center;color: #6C7293;font-size: 14px;height: 50px;margin-top: 2px;background-color: #FFFFFF;display: flex;justify-content: center;align-items: center">耗材库存状态环形图</el-row>-->
      </div>
      <div style="margin-left: 24px;height: auto;width: calc(100% - 368px)">
        <el-row>
          <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); height: 380px; background-color: #FFFFFF" id="materialNumberStatus"></el-col>
        </el-row>
<!--        <el-row style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);text-align: center;color: #6C7293;font-size: 14px;height: 50px;margin-top: 2px;background-color: #FFFFFF;display: flex;justify-content: center;align-items: center">各类型耗材数量统计图</el-row>-->
      </div>
    </div>
  </div>
</template>

<script>
import {overviewOfData,assetStatistics,consumableStatistics} from '../../api/famfrontend/homePage/homePage'
import * as echarts from "echarts";
export default {
  name: "wel",
  data() {
    return {
      form:{
        assetNum:'',
        consumableNum:'',
        stockNum:'',
        deptNum: '',
        staffNum: ''
      },
      Consumables:{
        adequateNum:'0',
        exhaustNum:'0',
        warningNum:'0'
      },
      typeStatisticsVOList:[],
      assetTypeList:[],
      assetNumList: [],
      consumableTypeList:[],
      consumableNumList: [],
    };
  },
  mounted() {
    this.overviewOfData();
    this.assetStatistics();
    this.consumableStatistics();
  },
  methods: {
    //数据概览
    overviewOfData(){
      overviewOfData().then(res => {
        this.form.assetNum = res.data.data.assetNum;
        this.form.consumableNum= res.data.data.consumableNum;
        this.form.stockNum = res.data.data.stockNum;
        this.form.deptNum = res.data.data.deptNum;
        this.form.staffNum = res.data.data.staffNum;
      })
    },
    //资产统计
    assetStatistics(){
      assetStatistics().then(res => {
        this.typeStatisticsVOList = res.data.data.typeStatisticsVOList;
        this.assetTypeList = this.typeStatisticsVOList.map((item) => item.typeName);
        this.assetNumList = this.typeStatisticsVOList.map((item) => item.totalGoodsNum);
        this.assetStatusChart(res.data.data);
        this.assetNumberStatusChart(this.assetTypeList ,this.assetNumList,res.data.data.typeStatisticsVOList);
      })
    },
    //耗材统计
    consumableStatistics(){
      consumableStatistics().then(res => {
        this.Consumables.adequateNum = res.data.data.adequateNum;
        this.Consumables.exhaustNum = res.data.data.exhaustNum;
        this.Consumables.warningNum = res.data.data.warningNum;
        this.typeStatisticsVOList = res.data.data.typeStatisticsVOList;
        this.consumableTypeList = this.typeStatisticsVOList.map((item) => item.typeName);
        this.consumableNumList = this.typeStatisticsVOList.map((item) => item.totalGoodsNum);
        this.materialStatusChart(this.Consumables.adequateNum,this.Consumables.warningNum,this.Consumables.exhaustNum);
        this.materialNumberStatusChart(this.consumableTypeList ,this.consumableNumList,res.data.data.typeStatisticsVOList);
      })
    },

    /**
     * 资产状态环形图
     * @param unusedNum 闲置
     * @param collectNum 已领用
     * @param borrowNum 已借用
     * @param returnNum 退货
     * @param delNum 报废
     */
    assetStatusChart(assetsNums) {
      var chartDom = document.getElementById("assetStatus");
      var myChart = echarts.init(chartDom);
      var option;
      var apiDataassets = [
        {
          value: assetsNums.unusedNum,
          name: '闲置',
        },
        {
          value: assetsNums.collectNum,
          name: '已领用',
        },
        {
          value: assetsNums.borrowNum,
          name: '已借用',
        },
        {
          value: assetsNums.returnNum,
          name: '退货',
        },
        {
          value: assetsNums.delNum,
          name: '报废',
        }
      ]

      option = {
        title:{
          show:true,
          text: '资产状态环形图',
          x:'left',      // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'top',       // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          padding:[20,0,10,16],
          textStyle: {
            fontFamily: 'PingFangSC-Medium, PingFang SC',
            fontSize:  18,
            color: '#434A54',
            fontStyle: 'normal',
            fontWeight: '800',
          }
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#5F7997', '#5B8FF9','#54C7AA','#F2CE56','#D97B61'],  //闲置、已领用、已借用、退货、报废
        legend:  [{
          data:['闲置','已领用','已借用','退货','报废'],
          type: "plain",
          selectedMode: false, // 取消图例上的点击事件
          icon: "rect",
          orient: "vertical",
          itemGap: 30,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          top: "25%",
          right: "9%",
        },],
        series: [
          {
            type: 'pie',
            radius: ['59%', '35%'],
            center:['35%','50%'],
            avoidLabelOverlap: false,//解决数据指示线重叠或数据量小时被隐藏的问题
            data: apiDataassets,
            top: "0%",
            label:{
              normal:{
                formatter: "\n\n{d}%",
              },

            },
          },
        ],
      }

      // 饼图数据为0时隐藏数据指示线
      option.series[0].data.map((item,index)=>{
        if(item.value==0){
          item.value=''
        }
        return item
      })

      option && myChart.setOption(option);
    },
    /**
     * 各类型资产数量统计图
     * @param assetTypeList
     * @param assetNumList
     */
    assetNumberStatusChart(assetTypeList,assetNumList,typeStatisticsVOList) {
      var myChart = echarts.init(document.getElementById("assetNumberStatus"));
      var option = {
        // title:{
        //   text:'资产数量',
        //   padding:[20,0,100,100],
        // },
        title:[
          // {
          //   text: '资产数量',
          //   padding:[20,0,100,100],
          // },
          {
            text: '各类型资产数量统计图',
            x:'2%',      // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: '5%',       // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            padding:[0,0,15,0],
            textStyle: {
              fontFamily: 'PingFangSC-Medium, PingFang SC',
              fontSize: 14,
              color: '#434A54',
              fontStyle: 'normal',
              fontWeight: '600',
            }
          }
        ],
        legend:{
          top:'1%',
          textStyle:{
            color:'#3A92F9',
          }
        },
        tooltip:{
          show:true,
          trigger:'item',
          formatter: function (params) {
            let children=typeStatisticsVOList[params.dataIndex].children;
            let returnData = "";
            let indexColor = params.color;
            returnData += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:'+ indexColor +'"></span>';
            returnData +="总计:" + params.value + "</br>";
            returnData +=typeStatisticsVOList[params.dataIndex].typeName+":" + typeStatisticsVOList[params.dataIndex].goodsNum + "</br>";
            for (let i = 0; i < children.length; i++) {
              returnData +=children[i].typeName+":" + children[i].goodsNum + "</br>";
            }
            return returnData;
          }
        },
        xAxis:{
          show:true,					//---是否显示
          position:'bottom',			//---x轴位置
          offset:0,					//---x轴相对于默认位置的偏移
          type:'category',			//---轴类型，默认'category'
          nameLocation:'end',
          axisLabel: {
            //  X 坐标轴标签相关设置
            interval: 0,
            rotate: '30'
          },
          data: assetTypeList,//内容
        },
        yAxis:{
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          },
        },
        series: [
          {
            type: 'bar',				//---类型
            legendHoverLink:true,		//---是否启用图例 hover 时的联动高亮
            label:{						//---图形上的文本标签
              show:false,
              position:'insideTop',	//---相对位置
              rotate:0,				//---旋转角度
              color:'#3A92F9',
            },
            itemStyle:{					//---图形形状
              color:'#3A92F9',
              // barBorderRadius:[18,18,0,0],
            },
            barWidth:'20',				//---柱形宽度
            barCategoryGap:'20%',		//---柱形间距
            data: assetNumList
          }
        ]
      };

      myChart.setOption(option);
    },
    /**
     * 耗材库存状态环形图
     * @param adequateNum 充足数量
     * @param warningNum 告警数量
     * @param exhaustNum 用尽数量
     */
    materialStatusChart(adequateNum,warningNum,exhaustNum) {
      var chartDom = document.getElementById("materialStatus");
      var myChart = echarts.init(chartDom);
      var option;
      var apiData = [
        {
          value: adequateNum,
          name: '充足',
        },
        {
          value: warningNum,
          name: '告警',
        },
        {
          value: exhaustNum,
          name: '用尽',
        },
      ]
      option = {
        title:{
          show:true,
          text: '耗材库存状态环形图',
          x:'left',      // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'top',       // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          padding:[20,0,10,16],
          textStyle: {
            fontFamily: 'PingFangSC-Medium, PingFang SC',
            fontSize:  18,
            color: '#434A54',
            fontStyle: 'normal',
            fontWeight: '800',
          }
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#00CDBB', '#f99526', '#f55c46'],
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          type: "plain",
          icon: "rect",
          orient: "vertical",
          // left: "5%",
          top: "41%",
          right: "12%",

          itemGap: 30,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          symbolKeepAspect: true,
          textStyle: {
            rich: {
              name: {
                verticalAlign: "right",
                align: "left",
                width: 25,
                fontSize: 12,
              },
              value: {
                align: "left",
                width: 65,
                fontSize: 12,
              },
              count: {
                align: "left",
                width: 40,
                fontSize: 12,
              },
              upRate: {
                align: "left",
                fontSize: 12,
                color: "#000000",
              },
              downRate: {
                align: "left",
                fontSize: 12,
                color: "#000000",
              },
            },
            color: "#000000",
          },
          data: apiData.map((item) => item.name),
        },
        series: [
          {
            type: 'pie',
            // radius: ['24%', '50%'],
            radius: ['59%', '35%'],
            center:['35%','60%'],
            avoidLabelOverlap: true,//解决数据指示线重叠或数据量小时被隐藏的问题
            data: apiData,
            top: "-20%",
            label:{
              normal:{
                formatter: "\n\n{d}%",
              }
            }
          },
        ],
      }

      // 饼图数据为0时隐藏数据指示线
      option.series[0].data.map((item,index)=>{
        if(item.value==0){
          item.value=''
        }
        return item
      })
      option && myChart.setOption(option)
    },
    /**
     * 各类型耗材数量统计图
     * @param consumableTypeList
     * @param consumableNumList
     */
    materialNumberStatusChart(consumableTypeList,consumableNumList,typeStatisticsVOList) {
      var myChart = echarts.init(document.getElementById("materialNumberStatus"));
      var option = {
        title:[
          // {
          //   text: '耗材数量',
          //   padding:[20,0,100,100],
          // },
          {
            text: '各类型耗材数量统计图',
            x:'2%',      // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: '5%',       // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            padding:[0,0,15,0],
            textStyle: {
              fontFamily: 'PingFangSC-Medium, PingFang SC',
              fontSize: 14,
              color: '#434A54',
              fontStyle: 'normal',
              fontWeight: '600',
            }
          }
        ],
        legend:{
          top:'1%',
          textStyle:{
            color:'#3A92F9',
          }
        },
        tooltip:{
          show:true,
          trigger:'item',
          formatter: function (params) {
            let children=typeStatisticsVOList[params.dataIndex].children;
            let returnData = "";
            let indexColor = params.color;
            returnData += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:'+ indexColor +'"></span>';
            returnData +="总计:" + params.value + "</br>";
            returnData +=typeStatisticsVOList[params.dataIndex].typeName+":" + typeStatisticsVOList[params.dataIndex].goodsNum + "</br>";
            for (let i = 0; i < children.length; i++) {
              returnData +=children[i].typeName+":" + children[i].goodsNum + "</br>";
            }
            return returnData;
          }
        },
        xAxis:{
          show:true,					//---是否显示
          position:'bottom',			//---x轴位置
          offset:0,					//---x轴相对于默认位置的偏移
          type:'category',			//---轴类型，默认'category'
          nameLocation:'end',
          axisLabel: {
            //  X 坐标轴标签相关设置
            interval: 0,
            rotate: '30'
          },
          data: consumableTypeList,//内容,
        },
        yAxis:{
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          },
          // data:consumableNumList
        },
        series: [
          {
            type: 'bar',				//---类型
            legendHoverLink:true,		//---是否启用图例 hover 时的联动高亮
            label:{						//---图形上的文本标签
              show:false,
              position:'insideTop',	//---相对位置
              rotate:0,				//---旋转角度
              color:'#3A92F9',
            },
            itemStyle:{					//---图形形状
              color:'#54C7AA',
              // barBorderRadius:[18,18,0,0],
            },
            barWidth:'20',				//---柱形宽度
            barCategoryGap:'20%',		//---柱形间距
            data: consumableNumList
          }
        ]
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-col-4{
  width: 18.8%;
  margin-right: 6px;
}

::v-deep .el-col-4:last-child{
  margin-right: -16px;
}

.top{
  ::v-deep .el-col {
    margin-bottom: 2px!important;
  }
}
</style>

<style lang="scss">
.container{
  width: 100%;
  height: 100%;
  background: #F3F7FF;
  overflow: scroll;
}
.homePage_title{
  width: 100%;
  height: auto;
}
.text-wrapper_card {
  position: relative;
  //width: 312px;
  //height: 118px;
  //background: url('../../img/index/index-top-Bg.png') -10px -5px
  //no-repeat;
  background-size: 312px 118px;
  background-size: 100% 100%;
  background-color: #fff;
  margin-bottom: 17.5px;

  div:first-child{
    display: flex;
  }

  div:last-child{
    padding-top: 4px;
  }
  .Number {
    position: relative;
    display: inline;
    top:-22px;
    left: 22%;
  }
  .Cname {
    position: relative;
    top:3.5px;
    left: 24%;
  }

}

.index-top-icon{
  width: 44px;
  height: 44px;
  background-size: 85% 78% !important;
  margin-right: 36px;
}

.index-top1{
  background: url('../../img/index/index-top1.png') no-repeat;
  position: relative;
  top: 12.5px;
  left:-75px;
}

.index-top2{
  background: url('../../img/index/index-top2.png') no-repeat;
  position: relative;
  top: 12.5px;
  left:-63px;
}

.index-top3{
  background: url('../../img/index/index-top3.png') no-repeat;
  position: relative;
  top: 12.5px;
  left:-56px;
}

.index-top4{
  background: url('../../img/index/index-top4.png') no-repeat;
  position: relative;
  top: 12.5px;
  left:-62px;
}

.index-top5{
  background: url('../../img/index/index-top5.png') no-repeat;
  position: relative;
  top: 12.5px;
  left:-61px;
}
</style>
